<template>
  <div class="mainMenu" :style="{ width: themeConfig.isCollapse ? '60px' : '210px' }">
    <div v-if="isShowHeader" class="menu-header" :style="{ color: '#fff' }">
      <img class="img" src="@/assets/img/main/logo.svg" />
      <span v-if="!themeConfig.isCollapse" class="title">{{ APP_NAME }}</span>
    </div>

    <el-scrollbar
      :style="{
        height: props.isShowHeader ? 'calc(100% - 48px)' : '100%',
        backgroundColor: props.backgroundColor
      }"
    >
      <el-menu
        :default-active="activeId"
        class="animate__animated animate__fadeInLeft"
        :collapse="themeConfig.isCollapse"
        background-color="#ffffff"
        text-color="#303133"
        :collapse-transition="false"
        unique-opened
      >
        <SubMenu :menu-list="loginStore.menuList" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { mapPathToMenu } from "@/utils/mapRouteToMenu";
import useLoginStore from "@/store/login";
import { APP_NAME } from "@/config";
import useGlobalStore from "@/store/globe";
import SubMenu from "@/layout/components/SubMenu/SubMenu.vue";

const props = defineProps({
  collapse: {
    type: Boolean,
    default: false
  },
  isShowHeader: {
    type: Boolean,
    default: true
  },
  backgroundColor: {
    type: String,
    default: "#191a20"
  },
  activeTextColor: {
    type: String,
    default: "#fff"
  },
  textColor: {
    type: String,
    default: "#bdbdc0"
  }
});
const globalStore = useGlobalStore();
const route = useRoute();
const themeConfig = computed(() => {
  return globalStore.themeConfig;
});
const loginStore = useLoginStore();

const currPath = computed(() => {
  return route.path;
});
const menuActiveRoute = computed(() => {
  return mapPathToMenu(loginStore.menuList, currPath.value);
});

const activeId = ref(menuActiveRoute.value?.id + "");
watch(route, () => {
  activeId.value = menuActiveRoute.value?.id + "";
});
</script>

<style lang="less" scoped>
.mainMenu {
  height: 100%;

  .el-menu {
    height: 100%;
    border-right: 0;
  }

  :deep(.el-menu),
  :deep(.el-menu--popup) {
    .el-menu-item {
      &.is-active {
        background: var(--el-color-primary-light-9);

        &::before {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: 4px;
          content: "";
          background: var(--el-color-primary);
        }
      }
    }
  }
}

:deep .el-scrollbar__view {
  height: 100%;
}
</style>
